[data-notivue='success'],
[data-notivue='promise-resolve'] {
   --nv-bg: var(--nv-success-bg);
   --nv-fg: var(--nv-success-fg);
   --nv-accent: var(--nv-success-accent, var(--nv-global-accent));
   --nv-border: var(--nv-success-border);
}

[data-notivue='error'],
[data-notivue='promise-reject'] {
   --nv-bg: var(--nv-error-bg);
   --nv-fg: var(--nv-error-fg);
   --nv-accent: var(--nv-error-accent, var(--nv-global-accent));
   --nv-border: var(--nv-error-border);
}

[data-notivue='warning'] {
   --nv-bg: var(--nv-warning-bg);
   --nv-fg: var(--nv-warning-fg);
   --nv-accent: var(--nv-warning-accent, var(--nv-global-accent));
   --nv-border: var(--nv-warning-border);
}

[data-notivue='info'] {
   --nv-bg: var(--nv-info-bg);
   --nv-fg: var(--nv-info-fg);
   --nv-accent: var(--nv-info-accent, var(--nv-global-accent));
   --nv-border: var(--nv-info-border);
}

[data-notivue='promise'] {
   --nv-bg: var(--nv-promise-bg);
   --nv-fg: var(--nv-promise-fg);
   --nv-accent: var(--nv-promise-accent, var(--nv-global-accent));
   --nv-border: var(--nv-promise-border);
}

.Notivue__notification {
   --tip-width: calc(var(--tip-width-fx, 1) * var(--nv-tip-width, 0px));

   box-sizing: border-box;
   position: relative;
   width: var(--nv-min-width, auto);
   max-width: var(--nv-width, 100%);
   background-color: var(--nv-bg, var(--nv-global-bg));
   display: flex;
   align-items: var(--nv-y-align);
   border-radius: var(--nv-radius, 0);
   border: var(--nv-border-width, 0) solid var(--nv-border, var(--nv-global-border));

   box-shadow:
      var(--nv-shadow, 0 0 rgba(0, 0, 0, 0)),
      inset var(--tip-width) 0 0 var(--nv-accent);

   & * {
      box-sizing: border-box;
      touch-action: manipulation;
   }
}

.Notivue__notification[data-notivue-has-title='true'] {
   align-items: var(--nv-y-align-has-title, var(--nv-y-align));
}

.Notivue__icon {
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: visible;
   min-width: var(--nv-icon-size);
   width: var(--nv-icon-size);
   height: var(--nv-icon-size);
   margin: var(--nv-spacing) 0 var(--nv-spacing) var(--nv-spacing);
   color: var(--nv-accent);
}

.Notivue__content {
   --nv-content-space: calc(var(--nv-spacing) + var(--nv-spacing) * 0.15);

   display: flex;
   flex-direction: column;
   flex-grow: 1;
   text-align: inherit;
   padding: var(--nv-content-space);
}

.Notivue__content-title {
   line-height: 1.15;
   font-weight: 700;
   color: var(--nv-fg, var(--nv-global-fg));
   font-size: var(--nv-title-size);
   margin: 0 0 0.33em 0;
   padding: 0;
}

.Notivue__transition-enter-active {
   --dur-easing: 500ms cubic-bezier(0.16, 1, 0.3, 1);

   transition:
      opacity var(--dur-easing),
      transform var(--dur-easing);
}

@media (prefers-reduced-motion: reduce) {
   .Notivue__transition-enter-active {
      transition: none;
   }
}
.Notivue__transition-enter-from {
   opacity: 0;
   transform: scale(0.8);
}

.Notivue__transition-enter-to {
   opacity: 1;
   transform: scale(1);
}

.Notivue__transition-leave-active {
   transition: opacity 0ms ease;
}

.Notivue__transition-leave-from,
.Notivue__transition-leave-to {
   opacity: 0;
}

.Notivue__content-message {
   max-height: 250px;
   overflow: auto;
   line-height: 1.375;
   color: var(--nv-fg, var(--nv-global-fg));
   margin: 0;
   padding: 0;
   font-size: var(--nv-message-size);
   white-space: pre-line;
}

.Notivue__close {
   position: relative;
   cursor: pointer;
   padding: calc(var(--nv-spacing) / 2);
   margin: var(--nv-spacing) var(--nv-spacing) var(--nv-spacing) 0;
   font-weight: 700;
   border: none;
   background: none;
   line-height: 1;
   font-size: var(--nv-message-size);
   color: var(--nv-fg, var(--nv-global-fg));
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

   &::after {
      content: '';
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      background-color: var(--nv-fg, var(--nv-global-fg));
      opacity: 0;
      border-radius: calc(var(--nv-radius) / 2);
      transition: opacity 100ms ease-out;
   }

   @media (hover: hover) {
      &:hover {
         opacity: 1;

         &::after {
            opacity: 0.1;
         }

         & .Notivue__close-icon {
            opacity: 1;
         }
      }
   }
}

.Notivue__close-icon {
   width: var(--nv-icon-size);
   height: var(--nv-icon-size);
   display: flex;
   color: var(--nv-fg, var(--nv-global-fg));
   pointer-events: none;
   opacity: 0.65;
}

.Notivue__spinner {
   transform-origin: center;
   animation: Notivue__spinner-kf 0.75s infinite linear;
}

@keyframes Notivue__spinner-kf {
   100% {
      transform: rotate(360deg);
   }
}

@media (prefers-reduced-motion: reduce) {
   .Notivue__spinner {
      animation: none;
   }

   .Notivue__duplicate {
      animation: none;
   }
}

[dir='rtl'] {
   & .Notivue__notification {
      --tip-width-fx: -1;
   }

   & .Notivue__icon {
      margin: var(--nv-spacing) var(--nv-spacing) var(--nv-spacing) 0;
   }

   & .Notivue__content-message {
      font-size: calc(var(--nv-message-size) + 0.1em);
   }

   & .Notivue__content-title {
      font-size: calc(var(--nv-title-size) + 0.1em);
   }

   & .Notivue__close {
      margin: var(--nv-spacing) 0 var(--nv-spacing) var(--nv-spacing);
   }
}

.Notivue__duplicate {
   animation: Notivue__duplicate-kf 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes Notivue__duplicate-kf {
   0% {
      transform: scale(1);
      opacity: 1;
   }

   50% {
      transform: scale(1.035);
      opacity: 0.8;
   }

   100% {
      transform: scale(1);
      opacity: 1;
   }
}
